<template>
  <div class="fusionTable">
    <Dialog content="融合套餐数规模环比净增=融合套餐到达（当月）-融合套餐到达（上月）
存量融合数=融合套餐到达-融合套餐新增
户均贡献=收入/融合套餐数
新增—落地口径：按照资产落地口径统计融合套餐新增数   新增—营销口径：按照营销人员所在区域统计融合套餐新增数"></Dialog>
    <div class="table">
      <el-table v-loading="tableLoading" border style="width: 100%" :cell-style="{ padding: '0px' }" :header-cell-style="{
                    background: '#0070C0',
                    color: '#ffffff',
                    padding: '0',
                    height: '26px'
                }" :data="tableData">
        <el-table-column align="center" label="经营单元" prop="areaName" width="100"></el-table-column>
        <el-table-column align="center" label="环比净增">
          <el-table-column align="center" label="规模环比净增" prop="hbScaleIncrease" width="100"></el-table-column>
          <el-table-column align="center" label="增长率" prop="growthScale" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.growthScale + "%" }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="收入环比净增" prop="hbIncomeIncrease" width="100"></el-table-column>
          <el-table-column align="center" label="增长率" prop="incomeGrowth" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.incomeGrowth + "%" }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="存量">
          <el-table-column align="center" label="上年12月融合 （万户） " prop="fusionArrival" width="100"></el-table-column>
          <el-table-column align="center" label="上年12月收入" prop="fusionIncome" width="100"></el-table-column>
          <el-table-column align="center" label="上年12月户均贡献" prop="lastAverage" width="100"></el-table-column>
          <el-table-column align="center" label="存量融合（万户）" prop="stockFusion" width="100"></el-table-column>
          <el-table-column align="center" label="当月存量收入" prop="stockIncome" width="100"></el-table-column>
          <el-table-column align="center" label="当月户均贡献" prop="thisAverage" width="100"></el-table-column>
          <el-table-column align="center" label="用户保有" prop="userRetention" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.userRetention + "%" }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="收入保有" prop="incomeRetention" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.incomeRetention + "%" }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="新增">
          <el-table-column align="center" label="落地口径" prop="newAcceptance" width="100"></el-table-column>
          <el-table-column align="center" label="营销口径" prop="newLanding" width="100"></el-table-column>
          <!-- <el-table-column align="center" label="受理/落地" prop="acceptanceLanding" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.acceptanceLanding + "%" }}</span>
            </template>
          </el-table-column> -->
          <el-table-column align="center" label="增量收入" prop="fusionNewIncome" width="100"></el-table-column>
          <el-table-column align="center" label="户均贡献" prop="average" width="100"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="新增-存量 户均贡献差异" prop="difference" width="100"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// import { getMhIncomeFusionList } from "@/api/barCode/index";
import $barCodeApi from "@/api/barCode/index";
import Dialog from './dialog.vue'
export default {
  name: "fusionTable",
  components: {
    Dialog
  },
  props: {
    form: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      tableLoading: false,
      tableData: [],
      spanArr1: [],
      spanArr2: []
    };
  },
  computed: {},
  created () { },
  mounted () { },
  methods: {
    getList () {
      this.tableLoading = true;
      $barCodeApi.getMhIncomeFusionList({ ...this.form }, res => {
        if (res.code == 0) {
          this.tableLoading = false;
          this.tableData = res.content;
        }
      });
      // getMhIncomeFusionList(this.form)
      //   .then(res => {
      //     if (res.code == 0) {
      //       this.tableData = res.content;
      //     }
      //   })
      //   .finally(() => {
      //     this.tableLoading = false;
      //   });
    },
    headerCellStyle ({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0 && column.rowSpan == 2 || columnIndex === 1 && column.rowSpan == 1 || columnIndex === 0 && column.rowSpan == 1 || columnIndex === 2 && column.rowSpan == 1 || columnIndex === 3 && column.rowSpan == 1) {
      //   return 'background:#548234;color:#fff'
      // } else if (columnIndex === 2 && column.rowSpan == 1) {
      //   return 'background:#305496;color:#fff'
      // }
    },
    objectMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (this.spanArr1[rowIndex]) {
          return {
            rowspan: this.spanArr1[rowIndex],
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      if (columnIndex === 1) {
        if (this.spanArr2[rowIndex]) {
          return {
            rowspan: this.spanArr2[rowIndex],
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
};
</script>

<style scoped lang="scss"></style>
